<template>
	<view class="content">
		<view class="status-text">
			<text>当前工单信息</text>
		</view>
		<u-form class="form-content" :model="info" ref="iForm">
			<u-form-item :border-bottom="false" label-width="30%" label="任务:">
				<text class="form-text">{{info.taskName}}</text>
			</u-form-item>
			<u-form-item :border-bottom="false" label-width="30%" label="客户订单:">
				<text class="form-text">{{info.clientOrderCode}}</text>
			</u-form-item>
			<u-form-item :border-bottom="false" label-width="30%" label="生产工单:">
				<text class="form-text">{{info.workorderCode}}</text>
			</u-form-item>
		</u-form>
		<view class="status-text">
			<text>填写退料信息</text>
		</view>
		<u-form style="margin-left: 2%;" :model="form" ref="uForm">
			<uni-list style="margin-left: 2%;" :border="true" v-for="item in form.issueLineList" :key="item.lineId">
				<uni-list-item style="background-color: #f3f6f9;">
					<template v-slot:body>
						<u-row>
							<u-col :span="24">
								<text>{{convertNote(item)}}</text>
							</u-col>
							<u-col :span="24">
								<text>领料日期: {{$isEmpty(item.issueDate)?'':item.issueDate}}</text>
							</u-col>
							<u-col :span="24">
								<text>已退料数量: {{item.returnedQty}}</text>
							</u-col>
							<u-col :span="24">
								<u-input v-model="item.quantityRt" placeholder="请填写本次退料数量"
									type="number"></u-input>
							</u-col>
						</u-row>
					</template>
				</uni-list-item>
			</uni-list>
		</u-form>
		<view style="margin-top: 4%;">
			<u-row>
				<u-col>
					<u-button class="btn-gap" type="success" shape="circle" @click="submit">提交信息</u-button>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
		addRtIssueTask,
		getRtIssueDetail
	} from '@/api/work/rtIssue/rtIssue.js'
	export default {
		data() {
			return {
				info: {
					workorderCode: null,
					clientOrderCode: null,
					taskName: null,
					taskId: null
				},
				form: {
					warehouseLabel: '',
					warehouseId: null,
					warehouseName: null,
					warehouseCode: null,
					locationId: null,
					locationName: null,
					locationCode: null,
					areaId: null,
					areaName: null,
					areaCode: null,
					workorderCode: null,
					workorderId: null,
					issueLineList: []
				},
				selectedItem: {}
			};
		},
		onLoad(options) {
			let eventChannel = this.getOpenerEventChannel();
			let that = this;
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				that.info.taskName = data.taskName;
				that.info.taskId = data.taskId;
				that.info.workorderCode = data.workorderCode;
				that.info.clientOrderCode = data.clientOrderCode;
				that.form.workorderCode = data.workorderCode;
				that.form.workorderId = data.workorderId;
				that.form.taskId = data.taskId;
				that.form.workorderId = data.workorderId;
			});
		},
		created() {
			this.getRtIssueDetail();
		},
		methods: {
			/**
			 * 查询详情
			 */
			getRtIssueDetail() {
				getRtIssueDetail(this.info).then(res => {
					this.form.issueLineList = res.data;
				});
			},
			/** 
			 * 提交
			 */
			submit() {
				for (const f of this.form.issueLineList) {
				    if (f.quantityRt > (f.quantityIssued - f.returnedQty)) {
				        uni.showToast({
				            title: '退料数量不能大于领料数量，请检查数据后再提交',
				            icon: 'none',
				            duration: 4000
				        });
				        return; 
				    }
				}
				addRtIssueTask(this.form).then(res => {
					let url = `/pages/work/rtIssue/detail/result`;
					this.$tab.navigateTo(url);
				});
			},
			/**
			 * 移除物料
			 */
			removeLine(item) {
				this.form.issueLineList = this.form.issueLineList.filter(f => f.materialStockId !== item.materialStockId);
			},
			convertNote(item) {
				return `物料:${item.itemName} , 已领料数量: ${item.quantityIssued} , 单位: ${item.unitOfMeasure}`
			}
		}
	};
</script>

<style lang="scss">
	.form-content {
		border-radius: 15px;
		background-color: white;

		.u-form-item {
			margin-left: 3%;
			font-size: 18px;
		}

		.form-text {
			color: #999999;
			text-align: right;
			margin-left: 20%;
		}
	}

	::v-deep .uni-list-item__content-title {
		font-size: 18px;
	}

	::v-deep .uni-list-item__content-note {
		font-size: 16px;
	}

	::v-deep .uni-list-item__extra-text {
		font-size: 16px;
		color: #7da6ec;
	}
</style>